import { reactControl, BaseReactElementControl } from "pao-aop-client";
import React from "react";
import { addon } from "pao-aop";

// 样式
import './index.less';
import { Row, Col, Form, Input, Button, DatePicker } from "antd";
import { WrappedFormUtils, ValidationRule } from "antd/lib/form/Form";
import { CategorySign } from "src/models/categorySign";
import { ColumnProps } from "antd/lib/table";
import { NTButtonSelect } from "src/business/components/button-select";
import { NTButtonOption } from "src/business/components/button-option";
import { NTOperationTable, LabelType } from "src/business/components/operation-table";

/**
 * 组件：“标识模板”状态
 */
export class SignFrameState {
}

/**
 * 组件：标识模板
 * 描述 标识模板控件
 */
export class SignFrame extends React.Component<SignFrameControl, SignFrameState> {

    /**
     * 重置按钮回调
     */
    private reset = (e: any) => {
        let { reset_cb, form } = this.props;
        form.resetFields();
        reset_cb ? reset_cb(e) : null;
    }

    /**
     * 增加按钮回调
     */
    private handleAdd = (e: any) => {
        let { add_btn_props } = this.props;
        add_btn_props.cb ? add_btn_props.cb(e) : null;
    }

    // private handleEdit = (record: any) => {
    //     let { edit_cb } = this.props;
    //     edit_cb ? edit_cb(record) : null;
    // }

    // private handleDelete = (record: any) => {
    //     let { delete_cb } = this.props;
    //     delete_cb ? delete_cb(record) : null;
    // }

    // /**
    //  * table其他按钮回调
    //  */
    // private handleOtherClick = (type: any, contents: any) => {
    //     /** 自定义图标按钮回调事件 */
    //     if ('edit' === type) {
    //         console.log('自定义按钮edit返回值：', contents);
    //         this.editCategory(contents);
    //     }
    // }

    /**
     * 查询按钮回调
     */
    private handleSearch = (e: any) => {
        e.preventDefault();
        let { props } = this;
        let { search_cb } = this.props;
        props.form!.validateFields((err: any, values: any) => {
            // 查找按钮回调
            search_cb ? search_cb(err, values) : null;
        });
    }

    private applicationTypeButtonSelect = () => {

    }

    /**
     * table其他按钮回调
     */
    private handleOtherClick = (type: any, contents: any) => {
        let { edit_cb } = this.props;
        /** 自定义图标按钮回调事件 */
        if ('edit' === type) {
            console.log('自定义按钮edit返回值：', contents);
            edit_cb ? edit_cb(contents) : null;
        }
    }

    /**
     * 查询部分的jsx元素
     */
    private getFields = () => {
        const { getFieldDecorator } = this.props.form!;
        const { label_props } = this.props;
        let filelds = (
            <Row gutter={24}>
                <Col span={8} >
                    <Form.Item label={label_props[0].text}>
                        {getFieldDecorator(label_props[0].decorator_id!, {
                            rules: label_props[0].rules,
                        })(
                            <Input />
                        )}
                    </Form.Item>
                </Col>

                <Col span={8} >
                    <Form.Item label={label_props[1].text}>
                        {getFieldDecorator(label_props[1].decorator_id!, {
                            rules: label_props[1].rules,
                        })(
                            <Input />
                        )}
                    </Form.Item>
                </Col>
                <Col span={8} >
                    <Form.Item label={label_props[2].text}>
                        {getFieldDecorator(label_props[2].decorator_id!, {
                            rules: label_props[2].rules,
                        })(
                            <DatePicker />
                        )}
                    </Form.Item>
                </Col>
                <Col span={24}>
                    <Row type="flex" style={{ justifyContent: "flex-end" }}>
                        <Button style={{ marginRight: "20px" }} onClick={this.reset}>重置</Button>
                        <Button htmlType="submit">查询</Button>
                    </Row>
                </Col>
            </Row >
        );
        return filelds;
    }

    render() {
        const sign_search_input_part = this.getFields();
        let { add_btn_props, table_props, pagination, type_props, on_row_selection, on_click_del } = this.props;
        let { dataSource } = table_props;

        let other_label: LabelType[] = [{
            type: 'icon',
            label_key: 'edit',
            label_parameter: { icon: 'antd@edit' }
        }];

        // 给所有数据增加key，供表格使用
        if (dataSource) {
            for (const key in dataSource) {
                if (dataSource.hasOwnProperty(key)) {
                    const e = dataSource[key];
                    e.key = e.id;
                }
            }
        }

        const sign_search = (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
                {
                    this.props.type_show ?
                        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', }}>
                            <div style={{ fontWeight: 'bold' }}>{type_props!.label}:</div>
                            <NTButtonSelect onChange={this.applicationTypeButtonSelect} >
                                <NTButtonOption text='全部' allBtn={true} />
                                {
                                    type_props!.data.map((val: any, index: any) => {
                                        return (
                                            <NTButtonOption text={val.value} value={val.value} key={index} />
                                        );
                                    })
                                }
                            </NTButtonSelect>
                        </div> : <div />
                }
                <Row>
                    <Form
                        className="nt-sign-frame"
                        onSubmit={this.handleSearch}
                    >
                        {sign_search_input_part}
                    </Form>
                    <Row type="flex" style={{ padding: 10 }}>
                        {
                            add_btn_props.show ?
                                <Button onClick={this.handleAdd}>{add_btn_props.text}</Button> : <span />
                        }
                    </Row>
                </Row>
                <NTOperationTable
                    bordered={false}
                    data_source={dataSource}
                    columns_data_source={table_props.columns}
                    on_row_selection={on_row_selection!}
                    on_click_del={on_click_del!}
                    table_size='middle'
                    showHeader={true}
                    total={pagination!.total}
                    default_page_size={10}
                    other_label_type={other_label}
                    on_icon_click={this.handleOtherClick}
                    rowKey='id'
                />
            </div>

        );

        return (
            sign_search
        );
    }
}

/**
 * 控件：“标识模板”控制器
 * 描述 标识模板控制器
 */
@addon('SignFrame', '标识模板', '标识模板结构')
@reactControl(Form.create<SignFrameControl>()(SignFrame))
export class SignFrameControl extends BaseReactElementControl {
    /**
     * 表单
     * @description 由Form组件定义，无须赋值，组件可以直接访问，但组件必须通过Form.create()方法定义
     */
    form: WrappedFormUtils;

    /**
     * 搜索部分的表单属性
     */
    label_props: {
        text: string;
        decorator_id: string;
        rules?: ValidationRule[];
    }[];

    /**
     * 搜索按钮回调
     */
    search_cb?: Function;

    /**
     * 重置按钮回调
     */
    reset_cb?: Function;

    /**
     * 新建按钮属性
     */
    add_btn_props: {
        /**
         * 新建按钮文本
         */
        text: string;
        /**
         * 显示与否
         */
        show: boolean;
        /**
         * 新建按钮回调
         */
        cb?: Function
    };

    /**
     * 列标头部属性
     */
    table_props: {
        columns: ColumnProps<CategorySign>[];
        /**
         * 表格数据源
         */
        dataSource: any;
        cb?: Function;
    };

    /**
     * 编辑表格行回调，入参为该行所有数据
     * @param record 该行数据
     */
    edit_cb?: Function;

    /**
     * 分页组件参数
     */
    pagination?: {
        /**
         * 分页总条数
         */
        total: number;
        /**
         * 每页展示条数
         */
        pageSize: number;
    };

    /**
     * 类型选择
     */
    type_props?: {
        /**
         * 名称
         */
        label: string;
        /**
         * 类型数据源
         */
        data: any[];

    };

    /**
     * 判断类型选择与否
     */
    type_show?: boolean;

    /**
     * 表格是否展示选择框
     */
    on_row_selection?: any;

    /**
     * 表格删除按钮事件
     *
     */
    on_click_del?: (content?: any) => void;

    /**
     * 其他通用表格按钮
     */
    other_label_type?: any;

    constructor() {
        super();
    }
}

export default Form.create<SignFrameControl>()(SignFrame);